<template>
  <div class="dashboard-container">
     <div class="app-container">
       <el-card>
       <questionsHeader @getList="getDateList()" @onSearch="onSearch"></questionsHeader>
        <!-- 标签页 -->
        <!-- layout="total, sizes, prev, pager, next, jumper" -->
        <el-tabs type="card" @tab-click="handleClick">
         <el-tab-pane label="全部" name="0">
          <el-alert
            :title="`一共${data.total}条数据`"
            :closable="false"
            type="info" >
          </el-alert>
           <questionBank :dateList="dateList" :getDateList="getDateList"></questionBank>
         </el-tab-pane>
         <el-tab-pane label="待审核" name="1">
          <el-alert
            :title="`一共${data.total}条数据`"
            :closable="false"
            type="info" >
          </el-alert>
           <questionBank :dateList="dateList" :getDateList="getDateList" ></questionBank>
         </el-tab-pane>
         <el-tab-pane label="已审核" name="2">
          <el-alert
            :title="`一共${data.total}条数据`"
            :closable="false"
            type="info" >
          </el-alert>
           <questionBank :dateList="dateList" :getDateList="getDateList" ></questionBank>
         </el-tab-pane>
         <el-tab-pane label="已拒绝" name="3">
          <el-alert
            :title="`一共${data.total}条数据`"
            :closable="false"
            type="info" >
          </el-alert>
           <questionBank :dateList="dateList"  :getDateList="getDateList" ></questionBank>
         </el-tab-pane>
       </el-tabs>
       <!-- 标签页 -->
         <!-- 分页器 -->
        <el-row type="flex" justify="end">
          <el-pagination
             @current-change="handleCurrentChange"
             @size-change="handleSizeChange"
             :page-size="data.pagesize"
             :page-sizes="[5, 10, 15, 20]"
             background
             layout="prev, pager, next, sizes, jumper"
             :total="data.total">
           </el-pagination>
         </el-row>
       </el-card>
      </div>
 </div>
 </template>

<script >
// 引入题库组件
import questionBank from '../components/question-bank.vue'
// 引入头部搜索组件
import questionsHeader from '../components/questions-header.vue'
// 引入题库列表接口
import { choice } from '@/api/hmmm/questions.js'

export default {
  name: 'questions-choice',
  components: { questionBank, questionsHeader },
  data () {
    return {
      dateList: [],
      // 请求分页数据
      data: {
        page: 1,
        pagesize: 5,
        total: 0
      },
      // 审核状态
      chkState: undefined,
      form: {}
    }
  },
  created () {
    this.getDateList()
  },
  methods: {
    handleClick (pane) {
      console.log(pane.props.name)
      this.chkState = pane.props.name === '0' ? undefined : (pane.props.name - 1)
      this.getDateList()
    },
    // 获取题库列表
    async getDateList () {
      const { data } = await choice({ ...this.data, ...this.form, chkState: this.chkState })
      this.data.total = data.counts
      this.dateList = data.items
      console.log(111)
    },
    // 点击分页器数跳转
    async handleCurrentChange (val) {
      this.data.page = val
      this.getDateList()
    },

    // 搜索功能
    async onSearch (form) {
      this.form = form
      this.getDateList()
    },
    // 上架,下架
    shelves () {
      this.getDateList()
    },
    handleSizeChange () {
    }

  },
  computed: {
  }
}
</script>
<style scoped>
/deep/ .el-pagination__sizes{
  margin-left: 10px;
}
</style>
